<template>
  <div class="carousel-container">
    <el-carousel height="400px" :interval="3000" arrow="always">
      <el-carousel-item v-for="item in carouselItems" :key="item.id">
        <img :src="item.image" :alt="item.title" class="carousel-image">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'Carousel',
  data() {
    return {
       carouselItems: [
      { id: 1, title: '轮播图1', image: '/images/swiper1.png' },
      { id: 2, title: '轮播图2', image: '/images/swiper2.png' },
      { id: 3, title: '轮播图3', image: '/images/swiper3.png' }
    ]
    }
  }
}
</script>

<style scoped>
.carousel-container {
  margin: 20px 0;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>